<template>
  <lay-form :model="formData">
    <lay-row space="10">
      <lay-col v-for="item in handleConfig" :key="item.prop" md="12">
        <lay-form-item :label="item.label" :prop="item.prop">
          <slot v-if="item.custom" :name="item.custom"></slot>
          <template v-else-if="item.type && componentMap[item.type] && componentMap[item.type][0] && !custom">
            <component
              :is="componentMap[item.type][0]"
              :type="item.type"
              v-model="formData[item.prop]"
              @change="$emit('change', { e: $event, item })"
              v-bind="item.config || {}"
            >
              <template v-if="componentMap[item.type][1]">
                <component
                  :is="componentMap[item.type][1]"
                  v-for="optionItm in item.options"
                  :key="optionItm.value"
                  :label="optionItm.label"
                  :value="optionItm.value"
                  :disabled="optionItm.disabled || false"
                >
                  <!-- 这里没有吧radio、checkbox和select作区分判断，直接都写了 -->
                  {{ optionItm.label }}
                </component>
              </template>
            </component>
          </template>
          <lay-input
            v-else
            v-model="formData[item.prop]"
            @change="$emit('change', { e: $event, item })"
            v-bind="item.config || {}"
          ></lay-input>
        </lay-form-item>
      </lay-col>
    </lay-row>
    <!-- <lay-form-item>
      <lay-button @click="submitClick">保存</lay-button>
    </lay-form-item> -->
  </lay-form>
</template>

<script setup>
import { componentMap } from './config'
import { defineProps, computed } from 'vue'
const props = defineProps({
  config: {
    type: [Array, Object],
    default() {
      return []
    }
  },
  formData: {
    type: Array,
    default() {
      return {}
    }
  }
})
const handleConfig = computed(() => {
  if (Object.prototype.toString.call(props.config).slice(8, -1) === 'Array') {
    return props.config
  } else if (Object.prototype.toString.call(props.config).slice(8, -1) === 'Object') {
    return props.config.formItems
  }
  return []
})

// const submitClick = function () {
//   layer.open({
//     type: 1,
//     title: '表单结果',
//     content: `<div style="padding: 10px">${JSON.stringify(model)}</div>`,
//     shade: false,
//     isHtmlFragment: true,
//     btn: [
//       {
//         text: '确认',
//         callback(index) {
//           layer.close(index)
//         }
//       }
//     ],
//     area: '500px'
//   })
// }
</script>

<style></style>
